<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>中国古诗文</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body style="height: 100%;margin: 0;">

<div id="contar" style="height: 100%"></div>

<script type="text/javascript">
    var dom = document.getElementById("contar");
    var myChart = echarts.init(dom);

    nams = [];
    nums = [];

    $.ajax({


        dataType:'json',
        url:'http://localhost:8081/api/getFilmType.do',
        type:'GET',
        success:function(data){
            $.each(data.first,function(i,item){
                nams.push(item.name);
                nums.push(item.num);
            });
            showdata();
        }
    });

    option = null;
    function showdata(){
        option = {
            xAxis:{
                type:'category',
                boundaryGap:[0,0.01],
                name:'类型',
                axisLabel:{
                    interval:0
                },
                data:[],
                axisLabel:{
                    interval:0,//横轴信息全部显示
                    rotate:-30,//-30度角倾斜显示
                }
            },
            yAxis:{
                type:'value',
                name:'类型数'
            },
            series:[{
                data:[],
                type:'bar'
            }]
        }

        option.xAxis.data = nams;
        option.series[0].data = nums;

        if(option && typeof option === "object"){
            myChart.setOption(option,true);
        }
    }

</script>

</body>
</html>